<template>
  <view class="uni-container">
    <uni-forms labelWidth="80" ref="form" v-model="formData" :rules="rules" validateTrigger="bind" @submit="submit">
      <uni-forms-item name="menu_id" label="标识">
        <input placeholder="菜单项的ID，不可重复" @input="binddata('menu_id', $event.detail.value)" class="uni-input-border" :value="formData.menu_id" />
      </uni-forms-item>
      <uni-forms-item name="name" label="名称">
        <input placeholder="菜单名称" @input="binddata('name', $event.detail.value)" class="uni-input-border" :value="formData.name" />
      </uni-forms-item>
      <uni-forms-item name="icon" label="图标" style="margin-bottom: 40px;">
        <input placeholder="菜单图标" @input="binddata('icon', $event.detail.value)" class="uni-input-border" :value="formData.icon" />
        <uni-link font-size="12" href="https://uniapp.dcloud.net.cn/uniCloud/admin?id=icon-%e5%9b%be%e6%a0%87" text="如何获取内置图标或使用自定义图标？"
         class="uni-form-item-tips"></uni-link>
      </uni-forms-item>
      <uni-forms-item name="url" label="URL">
        <input placeholder="菜单url" @input="binddata('url', $event.detail.value)" class="uni-input-border" :value="formData.url" />
      </uni-forms-item>
      <uni-forms-item name="sort" label="序号">
        <input placeholder="菜单序号（越大越靠后）" type="number" @input="binddata('sort', $event.detail.value)" class="uni-input-border"
         :value="formData.sort" />
      </uni-forms-item>
      <uni-forms-item name="parent_id" label="父菜单标识">
        <input placeholder="父级菜单标识" @input="binddata('parent_id', $event.detail.value)" class="uni-input-border" :value="formData.parent_id" />
      </uni-forms-item>
      <uni-forms-item v-if="permissions.length" name="permission" label="权限列表" style="margin-bottom: 60px;">
        <uni-data-checklist multiple :range="permissions" @change="binddata('permission', $event.detail.value)"></uni-data-checklist>
        <view class="uni-form-item-tips">
          当用户拥有以上被选中的权限时，可以访问此菜单，建议仅对子菜单配置权限，父菜单会自动包含。
        </view>
      </uni-forms-item>
      <uni-forms-item name="enable" label="是否启用">
        <switch @change="binddata('enable', $event.detail.value)" :checked="formData.enable" />
      </uni-forms-item>
      <view class="uni-button-group">
        <button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">提交</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;"><button style="width: 100px;" class="uni-button">返回</button></navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import validator from '@/js_sdk/validator/opendb-admin-menus.js'

const db = uniCloud.database()

function getValidator (fields) {
  const reuslt = {}
  for (const key in validator) {
    if (fields.includes(key)) {
      reuslt[key] = validator[key]
    }
  }
  return reuslt
}

export default {
  data () {
    return {
      formData: {
        menu_id: '',
        name: '',
        icon: '',
        url: '',
        sort: null,
        parent_id: '',
        permission: [],
        enable: true
      },
      rules: {
        ...getValidator(['menu_id', 'name', 'icon', 'url', 'sort', 'parent_id', 'permission', 'enable'])
      },
      permissions: []
    }
  },
  onLoad () {
    this.loadPermissions()
  },
  methods: {
    /**
       * 触发表单提交
       */
    submitForm () {
      this.$refs.form.submit()
    },

    /**
       * 表单提交
       * @param {Object} event 回调参数 Function(callback:{value,errors})
       */
    submit (event) {
      const {
        value,
        errors
      } = event.detail

      // 表单校验失败页面会提示报错 ，要停止表单提交逻辑
      if (errors) {
        return
      }
      uni.showLoading({
        title: '提交中...',
        mask: true
      })
      this.$request('system/menu/add', value).then((res) => {
        uni.showToast({
          title: '新增成功'
        })
        this.getOpenerEventChannel().emit('refreshData')
        setTimeout(() => uni.navigateBack(), 500)
      }).finally(() => {
        uni.hideLoading()
      })
    },
    loadPermissions () {
      db.collection('uni-id-permissions').limit(500).get().then(res => {
        this.permissions = res.result.data.map(item => {
          return {
            value: item.permission_id,
            text: item.permission_name
          }
        })
      }).catch(err => {
        uni.showModal({
          title: '提示',
          content: err.message,
          showCancel: false
        })
      })
    }
  }
}
</script>
